Site screenshot: Add responsive image support to the screenshot block #175
Conversation
ryelle
added
the
[Component] Blocks/Editor
ryelle
force-pushed
the
update/screenshots-image-size
branch
from
fd12814 to
a05909e
Compare
There was a problem hiding this comment.
👍 Working for me in the grid.
Is there a reason not to do it on the single site page? At mobile size it looks like we're still loading the largest size:
sandboxes & production will use Photon and dynamically load the right size
Want to make sure I understand this, does photon look at the srcset and sizes and set the src appropriately?
No, I just focused on grid pages first, having the most images and therefore highest impact. It could be updated to work on single sites in the future, all that's needed is to figure out what the sizes & srcsets should be.
No, this is just about generating those image URLs. Photon hooks into the way WP generates media URLs and replaces them, so when you call for an image that's 100x100, it will automatically add |
|
I was navigating around the site on staging and found the single pages were pretty slow to load. Can we update them? The related sites contribute to the slowness. |
Fixes #156. This adds a new attribute to the screenshot block,
location. This passes a hint to the block about where the image will be used, so that we can set location-aware responsive image hints. When location isgrid|row(related sites), the block now addssrcset/sizesattributes.This PR also sets up a few new image sizes from 500-1400px wide, which covers the different sizes the images are shown in the grid. Locally you can regenerate these with
wp media regenerate, but sandboxes & production will use Photon and dynamically load the right size.Using smaller (height/width) images decreases the filesizes, so most images are under 500KB now even on retina screens.
This also fixes #171, because changing that later would require changing the
sizesvalue too.To test
srcsetandsizesattributes